<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <!--遍历数组-->
  <ul>
    <li v-for="p in persons" :key="p.id">{{p.id}}-{{p.name}}-{{p.age}}</li>
  </ul>

  <ul>
    <li v-for="(p,index) in persons" :key="index">{{p.id}}-{{p.name}}-{{p.age}}--{{index}}</li>
  </ul>

  <!--遍历对象-->
  <ul>
    <li v-for="(v,k) in car" :key="k">{{k}}--{{v}}</li>
  </ul>

  <!--遍历字符串-->
  <ul>
    <li v-for="(v,k) in str" :key="k">{{k}}--{{v}}</li>
  </ul>

  <!--遍历指定次数-->
  <ul>
    <li v-for="(v,k) in 12" :key="k">{{k}}--{{v}}</li>
  </ul>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data: {
      persons: [
        {id: '001', name: '张三', age: 17},
        {id: '002', name: '李四', age: 18},
        {id: '003', name: '王五', age: 19}
      ],
      car:{
        name:'mi',
        price:'90w',
        color:'yellow'
      },
      str:'qwertasdfg'
    }
  });
</script>
</body>
</html>
